import React,{useEffect} from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
// import Button from '@material-ui/core/Button';
// import List from '@material-ui/core/List';
// import Divider from '@material-ui/core/Divider';
// import ListItem from '@material-ui/core/ListItem';
// import ListItemIcon from '@material-ui/core/ListItemIcon';
// import ListItemText from '@material-ui/core/ListItemText';
// import InboxIcon from '@material-ui/icons/MoveToInbox';
// import MailIcon from '@material-ui/icons/Mail';
import "./less/Popup.less"

const useStyles = makeStyles({
    list: {
        width: '40vw',
    },
    fullList: {
        width: 'auto',
    },
});

export default function TemporaryDrawer(props) {
    const classes = useStyles();
    const [state, setState] = React.useState({
        top: false,
        left: false,
        bottom: false,
        right: false,
    });

    useEffect(() => {
        setState({ ...state, ["left"]: props.left });
    }, [props.left]);

    useEffect(() => {
        props.toggleDrawerClose(state.left);
    }, [state.left]);
    

    const toggleDrawer = (anchor, open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    const setActionCode = (code, title,id) => (event) => {
        props.setActionCode(code,title,id)
    }

    const list = (anchor) => (
        <div
            className={clsx(classes.list, {
                [classes.fullList]: anchor === 'top' || anchor === 'bottom',
            })}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <ul className="sidebar_content">
                {props.fieldArr.map((item, index) => (
                    <li key={item.id} onClick={setActionCode(item.actionCode, item.title,item.id)} className={item.id === props.subid ? 'active' : ''}>{item.title}</li>
                    // className={this.state.shitiNum === index ? 'active' : ''}
                ))}
            </ul>
        </div>
    );

  return (
      <div>
          <React.Fragment>
            <Drawer anchor={'left'} open={state['left']} onClose={toggleDrawer('left', false)}>
            {list('left')}
            </Drawer>
          </React.Fragment>
    </div>
    );

}

